<template>
  <view class="register-container">
    <view class="register-box">
      <text class="register-title">用户注册</text>
      <!-- 昵称输入 -->
      <view class="input-item">
        <text class="input-label">昵称</text>
        <input 
          class="input-content" 
          v-model="nickname" 
          placeholder="请输入您的昵称"
          maxlength="16"
        ></input>
      </view>
      <!-- 账号输入 -->
      <view class="input-item">
        <text class="input-label">账号</text>
        <input 
          class="input-content" 
          v-model="account" 
          placeholder="请设置登录账号（手机号/用户名）"
        ></input>
      </view>
      <!-- 密码输入 -->
      <view class="input-item">
        <text class="input-label">密码</text>
        <input 
          class="input-content" 
          v-model="password" 
          type="password" 
          placeholder="请设置登录密码（不少于6位）"
          minlength="6"
        ></input>
      </view>
      <!-- 确认密码 -->
      <view class="input-item">
        <text class="input-label">确认密码</text>
        <input 
          class="input-content" 
          v-model="confirmPwd" 
          type="password" 
          placeholder="请再次输入密码"
        ></input>
      </view>
      <!-- 头像选择 -->
      <view class="avatar-upload">
        <text class="input-label">头像</text>
        <view class="avatar-wrap" @click="chooseAvatar">
          <image 
            class="avatar-preview" 
            :src="avatar || '/static/avatar-default.png'" 
            mode="aspectFill"
          ></image>
          <text class="upload-text">点击更换头像</text>
        </view>
      </view>
      <!-- 注册按钮 -->
      <button class="register-submit-btn" @click="handleRegister">注册</button>
      <!-- 登录入口 -->
      <view class="go-login">
        <text>已有账号？</text>
		<navigator  url="/pages/login/login">
        <text class="login-link" @click="goToLogin">立即登录</text>
			</navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "RegisterPage",
  data() {
    return {
      nickname: "", // 自定义昵称
      account: "", // 登录账号
      password: "", // 登录密码
      confirmPwd: "", // 确认密码
      avatar: "" // 自定义头像
    };
  },  
  methods: {
    // 选择头像
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          this.avatar = res.tempFilePaths[0];
          uni.showToast({
            title: "头像选择成功",
            icon: "success"
          });
        }
      });
    },
    // 表单校验
    validateForm() {
      if (!this.nickname) {
        uni.showToast({ title: "昵称不能为空", icon: "none" });
        return false;
      }
      if (!this.account) {
        uni.showToast({ title: "账号不能为空", icon: "none" });
        return false;
      }
      if (this.password.length < 6) {
        uni.showToast({ title: "密码不少于6位", icon: "none" });
        return false;
      }
      if (this.password !== this.confirmPwd) {
        uni.showToast({ title: "两次密码不一致", icon: "none" });
        return false;
      }
      return true;
    },
    // 处理注册
    handleRegister() {
      if (!this.validateForm()) return;

      // 1. 读取已有注册数据（模拟数据库）
      const registerList = uni.getStorageSync("registerList") || [];
      // 2. 校验账号是否已存在
      const isExist = registerList.some(item => item.account === this.account);
      if (isExist) {
        uni.showToast({ title: "该账号已注册", icon: "none" });
        return;
      }

      // 3. 存储注册数据（模拟入库）
      const userData = {
        nickname: this.nickname,
        account: this.account,
        password: this.password,
        avatar: this.avatar || "/static/avatar-default.png",
        followCount: 3, // 默认关注数
        topicCount: 0 // 默认话题数
      };
      registerList.push(userData);
      uni.setStorageSync("registerList", registerList);

      // 4. 注册成功提示+跳转登录页
      uni.showToast({
        title: "注册成功",
        icon: "success"
      });
      setTimeout(() => {
        uni.navigateTo({
          url: "/pages/login/loginPage"
        });
      }, 1000);
    },
    // 跳转到登录页
    goToLogin() {
      uni.navigateTo({
        url: "/pages/login/loginPage"
      })
	  console.log("点击注册，准备调用接口发送数据");
	  				// 开启注册流程
	  				uni.showLoading({
	  					title: '注册中...'
	  				});
	  				// 把数据提交到服务端，所有接口的统一调用方式
	  				uniCloud.callFunction({
	  					//name 调用的接口名字
	  					name: 'addUser',
	  					// 上传的数据
	  					data: {
	  						'name': this.nickname,
	  						'password': this.password
	  					},
	  					success: (msg) => {
	  						console.log("addUser CallBack " + JSON.stringify(msg));
	  						//UI更新
	  						setTimeout(() => {
	  							uni.hideLoading()
	  							uni.showToast({
	  								title: '注册成功'
	  							})
	  						}, 1000)
	  						uni.navigateBack();
	  					},
	  					fail: (res) => {
	  						console.warn("addUser CallBack fail" + res);
	  					}
	  				})

    }
  }
};
</script>

<style scoped>
.register-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  padding-top: 40px;
}
.register-box {
   width: 90%;
   max-width: 400px;
   background-color: #fff;
   padding: 30px 20px;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 .register-title {
   font-size: 20px;
   font-weight: bold;
   color: #333;
   text-align: center;
   margin-bottom: 30px;
 }
 .input-item {
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
   gap: 4px;
 }
 .avatar-upload {
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
   gap: 8px;
 }
 .avatar-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
 }
 .avatar-preview {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   border: 1px solid #eee;
 }
 .upload-text {
   font-size: 12px;
   color: #999;
 }
 .input-label {
   font-size: 14px;
   color: #666;
 }
 .input-content {
   height: 44px;
   border: 1px solid #eee;
   border-radius: 4px;
   padding: 0 12px;
   font-size: 14px;
 }
 .register-submit-btn {
   width: 100%;
   height: 44px;
   background-color: skyblue;
   color: #fff;
   border: none;
   border-radius: 4px;
   font-size: 16px;
   margin: 10px 0 20px;
 }
 .go-login {
   text-align: center;
   font-size: 14px;
   color: #666;
 }
 .login-link {
   color: #ff4d4f;
   margin-left: 4px;
 }
 </style>